<template>
  <el-form label-width="120px" size="small" style="padding-left: 40px;">
    <el-steps direction="vertical" space="80px">
      <el-step title="">
        <template slot="title">
          <span class="title" style="">
            下载导入模板, 按要求填写知识信息
          </span>
        </template>
        <template slot="description">
          <div class="download-wrap">
            <i class="el-icon-download"></i>
            <el-button class="btn-text" type="text" @click="handleDownloadClick">下载导入模板文件</el-button>
          </div>
        </template>
      </el-step>
      <el-step>
        <template slot="title">
          <span class="title">上传填写完成的模板, 单个文件上传限1000行</span>
        </template>
        <template slot="description">
          <div class="download-wrap">
            <i class="el-icon-upload2"></i>
            <el-button class="btn-text" type="text" @click="handleUploadClick">点击上传</el-button>
          </div>
        </template>
      </el-step>
  </el-steps>
  </el-form>
</template>
<script>
import { $LibraryDataApi } from '@/network/library/LibraryDataApi';

export default {
  name: "FileUploadForm",
  props: {
    node: {
      type: Object
    }
  },
  data() {
    return {
      
    }
  },
  methods: {
    // 下载模板按钮点击
    async handleDownloadClick() {
      const { id: nodeId, recordId, featureId } = this.node;
      await $LibraryDataApi.downloadTemplate({
        recordId,
        featureId
      });         
    }
  }
}
</script>

<style scoped>
  
  .title {
    font-size: 14px;
    color: #000000d9;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, 微软雅黑, Arial, sans-serif;;
  }

  .download-wrap {
    margin-left: 10px;
  }

  .btn-text {
    margin-left: 5px;
  }

</style>